<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
   <div class="layui-fluid">
      <table class="layui-hide" id="depPosition" lay-filter="depPosition"></table>
  </div>
<script id="toolbar" type="text/html">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add">添加职位</button>
 </div>
</script>

<script id="bar" type="text/html">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="editLayer">
    <!-- 编辑模态框 -->
    <div>
     <form action="/editDepPosition" class="layui-form" id="editForm">
       <div class="layui-form-item" style="display:none">
       <label class="layui-form-label">id</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="id" id="id" readonly="readonly">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">部门名</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="depName" id="depName">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">职位名</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="position" id="position">
       </div>   
     </div>
     </form> 
    </div>
</script>

<script type="text/html" id="addLayer">
    <!-- 添加模态框 -->
     <div>
     <form action="/addDepPosition" class="layui-form" id="addForm">
     <div class="layui-form-item">
       <label class="layui-form-label">部门名称</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="depNo" id="depNo">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">职位名称</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="position" id="position">
       </div>   
     </div>
     </form> 
    </div>
</script>

<script src="layui/layui.js"></script> 

<script th:inline="none">
  layui.use('table',function(){
	  var table=layui.table;
	  var $=layui.jquery;
	  table.render({
		 elem:'#depPosition',
		 url:'/getDepPosition',
		 method:'post',
	     toolbar:'#toolbar',
	     defaultToolbar:['filter','exports','print',{title:'提示',layEvent:'LAYTABLE_TIPS',icon:'layui-icon-tips'}],
	     title:'部门表',
	     cols:[[
	    	 {type:'checkbox',fixed:'left'},
	    	 {field:'id',title:'ID',fixed:'left',unresize:true,sort:true},
	    	 {field:'position', title:'职位名'},
	    	 {field:'depName', title:'部门名称',sort: true},
	    	 {fixed: 'right', title:'操作', toolbar: '#bar'}
	     ]],
	     page:true
	     
	  });
	  
	  table.on('toolbar(depPosition)',function(obj){
		  var checkStatus=table.checkStatus(obj.config.id);
		  switch(obj.event){
		  case 'add':
			  layui.use('form',function(){
				  var form =layui.form;
				  var $=layui.jquery;				
				  var index=layer.open({
					  formType:1,
					  title:'添加职位',
					  area:['400px','250px'],
					  content:$('#addLayer').html(),
					  btn:['确认','取消'],
					  yes:function(index,layero){
						  var depName=$("#depName").val();
						  var position=$("#position").val();						
						  $.ajax({
							  url:'/addDepPosition',
							  method:'post',
							  contentType:"application/json;charset=utf-8",
							  data:JSON.stringify({position:position,depName:depName}),
							  success:function(data){
								  if(data){
									  layer.msg("添加成功");
									  window.setTimeout(function(){window.location.reload();},500)
								  }else{
									  layer.msg("添加失败，职位已存在");
								  }
								  
							  },
							  error:function(data){
								  layer.msg("添加失败");
								  layer.msg(account1);
							  }
						  });
					  },
					  btn2:function(index){layer.close(index);},
					  success:function(index,layero){
						  form.render();
					  },
				  });
			  });
		  break;

		  case 'LAYTABLE_TIPS':
			  layer.alert('这是工具栏右侧自定义的一个图标按钮');
		  break;
		  };
	  });
	  
	  //监听行工具事件
	  table.on('tool(depPosition)',function(obj){
		  var data=obj.data;
		  if(obj.event==='del'){
			  layer.confirm('真的删除吗',function(index){
				
			
					 
				  //向服务器端发送删除指令
				  $.ajax({
					  url:'/delDepPosition?id='+data.id,
					  method:'post',
					  async:false,
					  success:function(data){
						if(data){
						   layer.msg("删除成功");
						   obj.del();
						  }else{
							  layer.msg("删除失败，请检查该职位下是否还有员工");
						  }
					  },
					  error:function(data){
						  if(data){
							  layer.msg("删除失败");
						  }
					  }
				  });
			  });
		  }else if(obj.event==='edit'){
			 layui.use('form',function(){
				 var form=layui.form;
				 var $=layui.jquery;
			 var editIndex=layer.open({
				  formType:1,
				  title:'修改信息',
				  btn:['确认','取消'],
				  yes:function(editIndex,layero){
					//获取表单的值，必须再次出获取，若在给弹窗赋值后再获取，则获取到的仍是原始数据，相当于加载了一个空的表单，然后弹窗赋值，然后获取表单的值
					 var id=$("#id").val();
				     var position=$("#position").val();
				     var depName=$("#depName").val();
				  
					  //向后台发送修改请求
					  $.ajax({
						  url:'/editDepPosition',
						  contentType:"application/json;charset=utf-8",
						  method:'post',
						  data:JSON.stringify({id:id,position:position,depName:depName}),
						  success:function(data){
							  layer.msg("修改成功");
							  obj.update({
								  position:position,
								  depName:depName
							  });
							 
						  },
						  error:function(data){layer.msg("修改失败");}
					  });
				  },
				  btn2:function(editIndex,layero){
					  layer.close(editIndex);
				  },	
				  area:['400px','250px'],
				  content:$('#editLayer').html(),
				  success:function(layero,index){ 
					  //给个控件赋值
						 $("[name='id']").val(data.id);
						 $("[name='position']").val(data.position);
						 $("[name='depName']").val(data.depName);
						 form.render()},
				  });				 
			 });
		  }
	  });
  });  
</script>
   
</body>
</html>